<template>
	<view class="content">
		<view class="park">
			<view class="title">{{parkData.parkName}}</view>
			<view class="parkInfo">
				<view>总停车位:{{parkData.allPark}}</view>
				<view>剩余空位:{{parkData.vacancy}}</view>
				<view>距离:{{parkData.distance}}米</view>
				<view v-if="parkData.open=='Y'">对外开放</view>
				<view v-else>不对外开放</view>
				<view>收费:每小时{{parkData.rates}}元</view>
				<view>封顶价格:最高{{parkData.priceCaps}}元/天</view>
			</view>
			<view class="address">
				地址:{{parkData.address}}
			</view>
			<view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				parkData: {}
			}
		},
		onLoad(data) {
			const that = this
			http({
				url: "/prod-api/api/park/lot/list",
				data: {
					parkName: data.parkName
				}
			}).then((res) => {
				that.parkData = res.data.rows[0]
				that.$forceUpdate()
			})
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		width: 95%;
		margin: 20rpx;
		display: flex;
		flex-direction: column;
	}
		
	.park{
		display: flex;
		flex-direction: column;
		text-align: center;
		background-color: #ecf0f1;
	}
	.title {
		text-align: center;
		font-size: 45rpx;
		font-weight: bolder;
	}

	.parkInfo {
		display: flex;
		flex-wrap: wrap;
		background-color: #bdc3c7;
		margin: 30rpx;
		border-radius: 5px;
	}

	.parkInfo>* {
		min-width: 50%;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.address {
		font-size: 30rpx;
		font-weight: bolder;
	}
</style>
